---
id: box
title: Box
---

import { Props, BoxProps } from '../../core/components';

`Box` is the low-level layout component, it renders an individual `View` element with quick access to the standard padding and margin scales, as well as other common layout properties.

### Flex

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Box flex="fluid">
        <Placeholder />
      </Box>
      <Box direction="row">
        <Box flex="4/5">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="3/4">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="2/3">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="3/5">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="1/2">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="1/3">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="1/4">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="1/5">
          <Placeholder />
        </Box>
      </Box>
      <Box direction="row">
        <Box flex="content">
          <Placeholder width={320} />
        </Box>
      </Box>
    </Stack>
  )
}

render(<App />)
```

### AlignX

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Box alignX="left">
        <Placeholder width={60} />
      </Box>
      <Box alignX="center">
        <Placeholder width={60} />
      </Box>
      <Box alignX="right">
        <Placeholder width={60} />
      </Box>
      <Box alignX="between" direction="row">
        <Placeholder width={60} />
        <Placeholder width={60} />
        <Placeholder width={60} />
      </Box>
      <Box alignX="around" direction="row">
        <Placeholder width={60} />
        <Placeholder width={60} />
        <Placeholder width={60} />
      </Box>
      <Box alignX="evenly" direction="row">
        <Placeholder width={60} />
        <Placeholder width={60} />
        <Placeholder width={60} />
      </Box>
    </Stack>
  )
}

render(<App />)
```

### AlignY

```jsx live
const App = () => {
  return (
    <Container height={440}>
      <Box flex="fluid" direction="row" alignX="between">
        <Box alignY="top">
          <Placeholder height={60} width={60} />
        </Box>
        <Box alignY="center">
          <Placeholder height={60} width={60} />
        </Box>
        <Box alignY="bottom">
          <Placeholder height={60} width={60} />
        </Box>
        <Box alignY="between">
          <Placeholder height={60} width={60} />
          <Placeholder height={60} width={60} />
          <Placeholder height={60} width={60} />
        </Box>
        <Box alignY="around">
          <Placeholder height={60} width={60} />
          <Placeholder height={60} width={60} />
          <Placeholder height={60} width={60} />
        </Box>
        <Box alignY="evenly">
          <Placeholder height={60} width={60} />
          <Placeholder height={60} width={60} />
          <Placeholder height={60} width={60} />
        </Box>
      </Box>
    </Container>
  )
}

render(<App />)
```

### Padding

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Box padding={4}>
        <Placeholder />
      </Box>
      <Box paddingX={4}>
        <Placeholder />
      </Box>
      <Box paddingY={4}>
        <Placeholder />
      </Box>
      <Box paddingLeft={4}>
        <Placeholder />
      </Box>
      <Box paddingRight={4}>
        <Placeholder />
      </Box>
      <Box paddingTop={4}>
        <Placeholder />
      </Box>
      <Box paddingBottom={4}>
        <Placeholder />
      </Box>
    </Stack>
  )
}

render(<App />)
```

### Margin

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Box margin={4}>
        <Placeholder />
      </Box>
      <Box marginX={-3}>
        <Placeholder />
      </Box>
      <Box marginY={-3}>
        <Placeholder />
      </Box>
      <Box marginLeft={4}>
        <Placeholder />
      </Box>
      <Box marginRight={4}>
        <Placeholder />
      </Box>
      <Box marginTop={4}>
        <Placeholder />
      </Box>
      <Box marginBottom={4}>
        <Placeholder />
      </Box>
    </Stack>
  )
}

render(<App />)
```

### As

You can use the `as` prop to render another element (for instance `Animated.View`) instead of `View` (available only in TypeScript).

### Props

:::info

`Box` accepts all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'as',
      type: 'React.ComponentType',
      required: false,
      select: ['typescript']
    },
    {
      name: 'alignX',
      type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #between | #around | #evenly | #stretch]>',
      required: false,
    },
    {
      name: 'alignY',
      type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #between | #around | #evenly | #stretch]>',
      required: false,
    },
    {
      name: 'alignSelf',
      type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #stretch]>',
      required: false,
    },
    {
      name: 'direction',
      type: 'responsiveProp<[#row | #rowReverse | #column | #columnReverse]>',
      rawTsType: "ResponsiveProp<'row' | 'row-reverse' | 'column' | 'column-reverse'>",
      required: false,
    },
    {
      name: 'wrap',
      type: 'responsiveProp<[#wrap | #nowrap]>',
      required: false,
    },
    {
      name: 'flex',
      type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
      required: false,
    }
  ]} />

<BoxProps />
